<form nz-form class="ant-advanced-search-form">
  <div nz-row [nzGutter]="24">
    <div nz-col nzLg="12" nzXl="6">
      <nz-form-item nzFlex>
        <nz-form-label>{{l("username")}}</nz-form-label>
        <nz-form-control>
          <input type="text" [(ngModel)]="keyword" nz-input [ngModelOptions]="{standalone: true}" [placeholder]="l('please_enter_user')">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzLg="12" nzXl="6">
      <nz-form-item nzFlex>
        <nz-form-label>{{l("site_alone")}}</nz-form-label>
        <nz-form-control>
          <nz-select name="siteId" [(ngModel)]="siteId" [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="l('please_select_site')">
            <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
            <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzLg="12" nzXl="6">
      <nz-form-item nzFlex>
        <nz-form-label>{{l("user_role")}}</nz-form-label>
        <nz-form-control>
          <nz-select name="roleIdParam" [(ngModel)]="roleIdParam" [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="l('please_select_role')">
            <nz-option [nzValue]="''" [nzLabel]="l('please_select_role')"></nz-option>
            <nz-option *ngFor="let option of roles" [nzValue]="option.id" [nzLabel]="option.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzLg="12" nzXl="6" class="control-area">
      <button nz-button [nzType]="'primary'" (click)="load()">{{l("search")}}</button>
      <button nz-button (click)="reset()">{{l("reset")}}</button>
    </div>
  </div>

</form>
<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="editUser()"><i class="anticon anticon-plus-circle-o"></i>{{l("create")}}</button>
  <button nz-button nzType="primary" (click)="fileSelect.click()"><i class="anticon anticon-cloud-upload-o"></i>{{l("batch_import")}}</button>
  <input #fileSelect type="file" ng2FileSelect [uploader]="uploader" style="display:none"/>
</div>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false" [nzData]="tableHelper.items"
  [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
  [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzWidth="70px" nzLeft="0px">{{l("serial_number")}}</th>
      <th nzWidth="150px" nzLeft="70px">{{l("username")}}</th>
      <th>{{l("email")}}</th>
      <th>{{l("phone_number")}}</th>

      <th>{{l("user_role")}}</th>
      <th>{{l("site_alone")}}</th>
      <th>{{l("remark")}}</th>
      <th nzWidth="200px" nzRight="0px">{{l("operation")}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td nzLeft="70px">{{data.account}}</td>
      <td>{{data.name}}</td>
      <td>{{data.phone}}</td>
      <td *ngIf="data.roleInfos.length">{{data.roleInfos[0].name}}</td>
      <td *ngIf="!data.roleInfos.length">{{l('no_role')}}</td>
      <td>{{data.siteName}}</td>
      <td>{{data.remark}}</td>
      <td nzRight="0px">
        <a (click)="editUser(data.id)">{{l('edit')}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="setUserReason(data)" *ngIf="!data.usedFlag">{{l('enable')}}</a>
        <a (click)="setUserReason(data)" *ngIf="data.usedFlag">{{l('disenable')}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="setPwd(data.id)">{{l('set_pwd')}}</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>

<!-- <app-edit-user-modal #editUserModal (modalSave)="load()"></app-edit-user-modal>
<app-set-user-reason-modal #setUserReasonModal (modalSave)="load()"></app-set-user-reason-modal>
<app-set-password-modal #setPasswordModal></app-set-password-modal> -->